<template>
  <div class="demo-title">action-sheet/demo2</div>
  <div class="demo">
    <div class="sscd-demo-row" @click="showActionSheet()">取消/删除/禁用按钮</div>
  </div>
  <ActionSheet v-model:visible="visible" :menu-items="menuItems" cancel-text="取消" @choose="onChoose" />
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import ActionSheet from '@sscd-mobile/action-sheet'
  const visible = ref(false)
  const menuItems = [
    { name: '选项 1' },
    { name: '选项 2' },
    { name: '选项 3', type: 'disable' },
    { name: '选项 4' },
    { name: '删除', type: 'delete' }
  ]
  const showActionSheet = () => visible.value = true
  const onChoose = (e: any, i: number) => console.log('onChoose: ', e, i)
</script>
<style lang="less" scoped></style>